<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期的应用</title>

</head>
<body>
<div id="app">

    <div v-for="item in list">
        {{item.courseName}}
    </div>
</div>


</body>

<script src="../../../lib/vue.global.js"></script>
<script src="../../../lib/jquery.js"></script>
<script src="../../../lib/mock.js"></script>
<script src="../0.works/js/mock.js"></script>

<script>

    /**
     *     1. 创建 --- create ： 数据被创建、数据和视图模板没有关联
     *     2. 挂载 ---- mount ： 数据 被 渲染到 视图模板上
     *     3. 更新 ----update ： 数据被更新
     *     4. 卸载 -----unmount ：数据和视图模板视图模板失去关联
     *
     *     8个生命周期函数或者钩子  ---  before+xxx ;xxxed
     * */



    const creatApp = Vue.createApp;

    creatApp({
        data(){
             return {
                 list :[]
             }
        },mounted(){ // window.load / $(document).ready

             $.ajax({  // 如何使用promise方式实现
                 url:'http://test.org/course/list',
                 method:'get',
                 dataType:'json',
                 success:(data)=>{
                     console.log(data);
                     this.list = data;
                 }
             })
        }
    }).mount('#app')



</script>

</html>